<template>
  <div>
    <el-form label-width="70px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号" prop="username">
        <el-input v-model="account.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password></el-input>
      </el-form-item>

      <el-form-item>
        <el-image
          :src="codeUrl"
          @click="getVertifyCode"
          title="看不清，换一张"
        ></el-image>
      </el-form-item>

      <el-form-item label="验证码" prop="vertifyCode">
        <el-input v-model="account.vertifyCode"> </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
} from 'vue'
import { useStore } from '@/store'
import { h } from 'vue'
import { ElForm, ElNotification } from 'element-plus'
import localCache from '@/utils/cache'
import { rules } from '../config/account-config'
import router from '@/router'
import { watch } from '@vue/composition-api'

// import ybRequest from '@/service'
export default defineComponent({
  setup() {
    onMounted(() => {
      nextTick(() => {
        getVertifyCode()
      })
    })
    const store = useStore()

    var codeUrl = computed(() => {
      return store.state.login.vertifyCode
    })
    const getVertifyCode = () => {
      store.dispatch('login/getVertifyCode')
    }

    const account = reactive({
      username: localCache.getCache('username') ?? '',
      password: localCache.getCache('password') ?? '',
      vertifyCode: '',
    })

    const formRef = ref<InstanceType<typeof ElForm>>()

    const loginAction = (isKeepPassword: boolean) => {
      formRef.value?.validate((valid) => {
        if (valid) {
          //1.判断是否要记住密码
          //2.本地规则验证
          if (isKeepPassword) {
            //本地缓存
            localCache.setCache('username', account.username)
            localCache.setCache('password', account.password)
          } else {
            localCache.clearCache()
          }
          // console.log(account)
          //3.进行服务器端验证
          store.dispatch('login/accountLoginAction', { ...account })
          
      
        }
      })
    }

    return {
      account,
      loginAction,
      formRef,
      rules,
      codeUrl,
      getVertifyCode,
    }
  },
})
</script>

<style scoped></style>
